<template>
  <div>
    <el-dialog
      class="lookCaption"
      :title="title"
      center
      :visible.sync="isShow"
      width="30%"
      :close-on-click-modal="false"
      append-to-body
      @close="closeDialog"
    >
      <!-- <div v-for="(item, index) in textData" :key="index" class="text item">
        <span>原因：</span>
        <span>{{item.reason }}</span>
        <span>金额：</span>
        <span>{{item.money }}</span>
      </div>-->
      <div class="content">
        <el-card v-for="(item, index) in textData" :key="index">
          <div class="caption-item">
            <div>
              <span class="item-label">原因：</span>
              <div class="item-content">
                <span>{{item.reason}}</span>
              </div>
              <span class="item-label">金额：</span>
              <div class="item-content">
                <span :class="moneyClassName">{{item.money}}</span>
              </div>
              <!--<span>{{item.reason }}</span>
              <span class="title">金额：</span>
              <span>{{item.money }}</span>-->
            </div>
          </div>
        </el-card>
      </div>

      <!-- <div slot="footer">
        <el-button type="primary" @click="isShow=false">确定</el-button>
      </div>-->
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isShow: false,
      title: "",
      textData: [],
      where: '',
      moneyClassName: 'reward'
    };
  },
  methods: {
    show(data, where) {
      this.where = where
      if (where == "reward") {
        this.title = "奖励说明";
      } else if (where == "deduction") {
        this.title = "扣款说明";
      }
      this.textData = data;
      this.isShow = true;
    },
    closeDialog() {
      this.textData = [];
    }
  },
  watch: {
    where: function (val) {
      if (val == 'reward') {
        this.moneyClassName = 'font_success'
      } else if (val == "deduction") {
        this.moneyClassName = 'font_danger'
      }
    }
  }
};
</script>

<style lang='less' type='text/css'>
.lookCaption {
  .el-dialog__body {
    padding: 25px 20px 30px;
  }
  .content {
    .caption-item {
      .item-label {
        width: 80px;
        text-align: right;
        vertical-align: middle;
        float: left;
        font-size: 14px;
        color: #606266;
        line-height: 30px;
        padding: 0 12px 0 0;
        box-sizing: border-box;
      }
      .item-content {
        line-height: 30px;
        position: relative;
        font-size: 14px;
      }
    }
  }
  .el-card {
    margin-bottom: 10px;
    .el-card__body {
      padding: 10px;
    }
  }
  .el-card:last-child {
    margin-bottom: 0;
  }
}
</style>
